<template>
    <div>
        <div class="right-body">
            <div class="operation-layout">
                <div class="operation-list">
                    <ul>
                        <li v-for="(val,index) in tabArr" :key="index" :class="[index==active ? 'active':'']" @click="active=index,listType()">
                            <span>{{val}}</span>
                            <div class="after"></div>
                        </li>                        
                    </ul>                
                </div>
                <!-- <div class="searchDiv">
                    <input type="search" value="" placeholder="请输入兑换码"/><input type="button" value="兑换" />
                </div> -->
                <div class="myClear">           	
                </div>
            </div>
            <!-- gGift begin -->
            <div class="Gift-view-layout">
                <ul class="coupons">
                    <li v-for="(val,index) in yhqList" :key="index"  :class="[val.status==1||val.status==2?'hui':'']">
						<!-- 未使用 -->
						<div v-if="val.status==0">
							<div class="coupon-left">
                            <p>{{val.coupon.price}}元</p>
                            <p>满{{val.coupon.validScope}}元可使用</p>
                            <p>{{val.coupon.startTimeStr}}-{{val.coupon.endTimeStr}}</p>
							</div>
							<div class="coupon-right">
								<p>仅限用于下单使用</p>
								<p v-if="val.status==2">已失效</p>
							</div>
						</div>
						<!-- 已使用 -->
						<div v-if="val.status==1">
							<div class="coupon-left">
                            <p>{{val.coupon.price}}元</p>
                            <p>满{{val.coupon.validScope}}元可使用</p>
                            <p>{{val.coupon.startTimeStr}}-{{val.coupon.endTimeStr}}</p>
							</div>
							<div class="coupon-right">
								<p>仅限用于下单使用</p>
								<p>已使用</p>
								<p v-if="val.status==2">已失效</p>
							</div>
						</div> 
						<!-- 已失效 -->
						<div v-if="val.status==2">
							<div class="coupon-left">
                            <p>{{val.coupon.price}}元</p>
                            <p>满{{val.coupon.validScope}}元可使用</p>
                            <p>{{val.coupon.startTimeStr}}-{{val.coupon.endTimeStr}}</p>
							</div>
							<div class="coupon-right">
								<p>仅限用于下单使用</p>								
								<p>已失效</p>
							</div>
						</div>                      
                    </li>                   
                </ul>
            </div>
            <!-- coupon end -->
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            active:0,
            tabArr:['可使用','已使用','已失效'],
            yhqMa:'',
            yhqList:[],
            nullData:false,
			currentTime:new Date().getTime(),
			showArr:[],
			groupCode:'',
			status:0
        }
    },
    mounted(){
        this.couponsList()
    },
    methods:{
		//数据筛选
		listType(){
			if(this.active==0){
				this.status = 0
			}else if(this.active==1){
				this.status = 1
			}else if(this.active==2){
				this.status = 2
			}
			this.couponsList();
		},
        // 优惠券列表
        couponsList(){
			let params = {
				groupCode:this.groupCode,
				status:this.status
			}
            apiHttp.apiCenter.getMyCoupons(this.groupCode,this.status,params,resp=>{               
                if(resp.code == 200){					
                    this.yhqList = resp.data.content;
                    if(this.yhqList.length==0){
                        this.nullData = true;
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
    .myClear{
		clear: both;
	}
	::-webkit-input-placeholder{
		color: #999999;
		font-size: 13px;		
	}
	.searchDiv{
		float: right;
		margin-top: 28px;
		margin-right: 4%;
	}
	.searchDiv>input:nth-child(1){
		padding: 0px 0px 4px 15px;
		width: 160px;
		height: 24px;
		border-top: 1px solid #CCCCCC;
		border-right-width: 0px;
		border-left: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		border-radius: 30px 0px 0px 30px;
	}
	.searchDiv>input:nth-child(2){
		width: 54px;
		height: 26px;
		border-top: 1px solid #CCCCCC;
		border-right: 0px solid #CCCCCC;
		border-left-width: 0px;
		border-bottom: 1px solid #CCCCCC;		
		background-color: #D84D4E;
		border-radius: 0px 30px 30px 0px;
		color: #FFFFFF;
		font-size: 13px;
		position: relative;
		top: 2px;
	}
	/*Gift-view-layout*/
	.Gift-view-layout{
	    float: left;
	    padding: 40px;
	    box-sizing: border-box;
	}
	.coupons{
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 10px;
		color: #FFFFFF;
	}
	.coupons .hui{
		/*灰色背景图-已使用*/
		background-position: 0px -165px;
	}
	.coupons>li{
		margin-right: 10px;
		margin-bottom: 20px;
		width: 340px;
		height: 165px;
        background: url("../../assets/img/left-menu/coupon-bg.png") no-repeat;		
		padding: 20px 10px;
	}
	.coupons .coupon-left{
		float: left;
		padding-top: 15px;
		padding-left: 20px;
	}
	.coupons .coupon-left>p:nth-child(1){
		font-size: 28px;
	}
	.coupons .coupon-left>p:nth-child(2){
		font-size: 16px;
		margin-bottom: 15px;
	}
	.coupons .coupon-left>p:nth-child(3){
		font-size: 8px;
	}
	.coupons .coupon-right{
		float: right;
		font-size: 6px;
		padding-top: 40px;
		padding-right: 15px;
		text-align: center;
	}
	.coupons .coupon-right>p:nth-child(2){
		margin-top: 20px;
	}
	.Gift-view-layout{
		margin-top: 30px;
	}
</style>

